<template>
  <view class="layout pageBg">
    <!-- 导航栏占位 -->
    <view :style="{height: navBarHeight + 'px'}"></view>
    <view class="info f fv fac fpc" v-if="true">
      <view class="avatar">
        <image src="../../static/logo.png" mode=""></image>
      </view>
      <view class="nickName">ethink</view>
      <view class="ip">来自：重庆</view>
    </view>
    
    <view class="login" v-else>
      <button type="primary">登录</button>
    </view>
    
    <view class="section">
      <view class="list">
        <view class="row f fac fpj">
          <view class="left f fac">
            <uni-icons type="download-filled" size="24"></uni-icons>
            <text>我的下载</text>
          </view>
          <view class="right f fac">
            <text>0</text>
            <uni-icons type="right" size="20" color="#aaa"></uni-icons>
          </view>
        </view>
        <view class="row f fac fpj">
          <view class="left f fac">
            <uni-icons type="star-filled" size="24"></uni-icons>
            <text>我的评分</text>
          </view>
          <view class="right f fac">
            <text>0</text>
            <uni-icons type="right" size="20" color="#aaa"></uni-icons>
          </view>
        </view>
        <view class="row f fac fpj">
          <view class="left f fac">
            <uni-icons type="chatboxes-filled" size="24"></uni-icons>
            <text>联系客服</text>
          </view>
          <view class="right f fac">
            <uni-icons type="right" size="20" color="#aaa"></uni-icons>
          </view>
          <!-- H5和APP是没有客服的，所以换成电话，MP表示小程序-->
          <!-- #ifdef MP -->
          <button class="contact" open-type="contact">联系客服</button>
          <!-- #endif -->
          <!-- #ifndef MP -->
          <button class="contact" @click="contactPhone">联系客服</button>
          <!-- #endif -->
        </view>
      </view>
    </view>
    
    <view class="section">
      <view class="list">
        <view class="row f fac fpj">
          <view class="left f fac">
            <uni-icons type="notification-filled" size="24"></uni-icons>
            <text>订阅更新</text>
          </view>
          <view class="right f fac">
            <uni-icons type="right" size="20" color="#aaa"></uni-icons>
          </view>
        </view>
        <view class="row f fac fpj">
          <view class="left f fac">
            <uni-icons type="flag-filled" size="24"></uni-icons>
            <text>常见问题</text>
          </view>
          <view class="right f fac">
            <uni-icons type="right" size="20" color="#aaa"></uni-icons>
          </view>
        </view>
        <view class="row f fac fpj">
          <view class="left f fac">
            <uni-icons type="gear-filled" size="24"></uni-icons>
            <text>退出登录</text>
          </view>
          <view class="right f fac">
            <uni-icons type="right" size="20" color="#aaa"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue"
import { getTitleBarHeight } from "@/utils/system.js"
let navBarHeight = ref(getTitleBarHeight())
// H5||APP联系客服(拨打电话)
const contactPhone = () => {
  uni.makePhoneCall({
    phoneNumber: "15178936411"
  })
}
</script>

<style lang="scss">
.layout {
  padding: 0 30rpx;
  .info {
    padding-top: 30rpx;
    // margin-top: 30rpx;
    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .nickName {
      font-size: 40rpx;
      margin-top: 20rpx;
    }
    .ip {
      color: #eee;
      font-size: 24rpx;
      margin-top: 10rpx;
      color: #ababab;
    }
  }
  
  .section {
    margin: 50rpx auto;
    border: 1px solid #eee;
    border-radius: 10rpx;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
    .row {
      padding: 30rpx 10rpx;
      border-bottom: 1px solid #eee;
      position: relative;
      background-color: #fff;
      &:last-child {
        border-bottom: none;
      }
      .left {
        :deep() {
          .uni-icons {
            color: $main-theme-color !important;
          }
        }
        text {
          color: #6e6e6e;
          margin-left: 15rpx;
        }
      }
      .right {
        text {
          color: #aaa;
          margin-left: 15rpx;
        }
      }
      .contact {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }
}
</style>
